Синтаксис шаблонов

Платформа OUTOFBOX.RU в качестве шаблонизатора использует Twig http://twig.sensiolabs.org/

Twig – это шаблонизатор с простым и понятным синтаксисом. Более подробно почитать про его особенности и синтаксис можно в официальной документации по адресу http://twig.sensiolabs.org/documentation

Twig шаблоны в системе OUTOFBOX.RU должны иметь расширение .html.twig.

Одной из очень удобных функций Twig является функция наследования шаблонов. Большинство сайтов имеют элементы, которые отображаются на всех страницах, например, header и footer сайта. Нет нужды вставлять однотипные участки в каждый шаблон. Вместо этого, можно наследоваться от базового шаблона.

Ниже приведен пример такого базового шаблона. Называться он может как угодно и располагаться в любом подкаталоге каталога Outofbox/Templates. Но рекомендуем использовать в качестве имя для такого шаблона layout.html.twig и хранить его в корне каталога.

layout.html.twig
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>{% block page_title %}MySite.tld{% endblock %}</title>
</head>
<body>
    {% block content %}{% endblock content %}
</body>
</html>

Для наследования используются блоки. Блок состоит из открывающей конструкции {% block <block-name> %}, тела блока и закрывающей конструкции {% endblock <block-name> %}. Имя блока должно быть уникальным в пределах одного шаблона.

В данном примере заявлено два блока: page_title и content. Любой из этих блоков будет доступен для дополнения или изменения в наследующих шаблонах.

Теперь создадим шаблон homepage.html.twig, который отвечает за отображение главной страницы сайта:

homepage.html.twig
{% extends '@skin/layout.html.twig' %}

{% block content %}
    <h1>Главная страница</h1>
    <p>Добро пожаловать!</p>
{% endblock %}

Как видно, данный шаблон содержит только то, что относится к отображению главной страницы. При обработке данного шаблона будет взят за основу шаблон layout.html.twig и в нем произойдет замена содержимого блоков.

Тогда результирующий html будет выглядеть следующим образом:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>MySite.tld</title>
</head>
<body>
    <h1>Главная страница</h1>
    <p>Добро пожаловать!</p>
</body>
</html>

Как видно, содержимое блока content из шаблона homepage.html.twig отобразилось в том месте, где заявлен блок content в шаблоне layout.html.twig. Обратите внимание на тег <title>. Так как мы не переопределили блок page_title в нашем шаблоне, то был использован контент блока из базового шаблона. Если мы поменяем шаблон следующим образом:

homepage.html.twig
{% extends '@skin/layout.html.twig' %}

{% block page_title %}Главная страница сайта{% endblock %}

{% block content %}
    <h1>Главная страница</h1>
    <p>Добро пожаловать!</p>
{% endblock %}

То результирующий html будет следующим:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Главная страница сайта</title>
</head>
<body>
    <h1>Главная страница</h1>
    <p>Добро пожаловать!</p>
</body>
</html>

Таким образом можно полностью переопределять блоки.

Помимо переопределения содержимого блока, его можно дополнять. Для этого используется специальная функция {{ parent() }} внутри блока.

Например, изменим наш блок следующим образом:

{% block page_title %}Главная страница сайта. {{ parent() }}{% endblock %}

И тогда title изменится следующим образом:

<title>Главная страница сайта. MySite.tld</title>